<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 单曲线样式1，没有坐标轴，平滑曲线
 * @LastEditTime: 2021-10-28 14:15:49
 * @FilePath: \tianjushi-kanban\src\components\charts\SingleBar1.vue
-->
<template>
<div :style="[{ width: width, height: height,overflow:'hidden' }]">
  <div
    ref="echartref"
    :style="[{ width: width, height: height }, _resetChartStyle]"
  ></div>
</div>
  
</template>

<script>
import * as echarts from "echarts";

import { onMounted,toRefs, ref,reactive,watch,computed } from 'vue';
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {  
  
  props: {
      title: {
      type: String,
      default: ":title='设置标题'",
    },
      width: {
      type: String,
      default: "100%",
    },
     height: {
      type: String,
      default: "100%",
    },
    chartdata:{
     type: Array,
      default:   {'xData':["1月", "2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
	       'yData':[200, 300,400,200, 300,400,200, 300,400,200, 300,400],}
    },
    color: {
      type: Array,
      default: ['#00feff', '#027eff','#0286ff'],
    },
  },
  setup: function (props, context) {
     
    /*监听props*/
    watch(props, (newProps, oldProps) => {
        f_echartInit(state.chartInit)
    }); 
 
    let state = reactive({ 
      echartref: ref(),
      chartInit:""
    }) 

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle()
      } 
    }) 

    const f_echartInit = (chartdom) =>{   
  
					let xData = props.chartdata.xData,
						yData = props.chartdata.yData;
					let min = 50;
				 
				  let option = {
						color: ['#3398DB'],
						title: {
							text: '{a|'+props.title+'}',
							left: 'center',
							top: '5px',
							textStyle: {
								rich: {
									a: {
										fontSize: 16,
										color: '#fff'
									}
								}
							}
						},
						legend: {
							show: false
						},
						grid: {
							left: '10px',
							right: 0,
							bottom: '5%',
							top: '35px',
							containLabel: true,
							z: 22
						},
						xAxis: [{
							type: 'category',
							gridIndex: 0,
							data: xData,
							axisTick: {
								alignWithLabel: true
							},
							axisLine: {
								lineStyle: {
									color: '#0c3b71'
								}
							},
							axisLabel: {
								show: true,
								color: 'rgb(170,170,170)',
								fontSize: 16
							}
						}],
						yAxis: [{
							type: 'value',
							nameTextStyle: {
								color: "rgb(170,170,170)"
							},
							gridIndex: 0,
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							// min: min,
							// max: 100,
							axisLine: {
								lineStyle: {
									color: '#0c3b71'
								}
							},
							axisLabel: {
								color: 'rgb(170,170,170)',
								formatter: '{value}'
							}
						},
						{
							type: 'value',
							gridIndex: 0,
							min: min,
							max: 100,
							splitNumber: 12,
							splitLine: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							},
							splitArea: {
								show: true,
								areaStyle: {
									color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
								}
							}
						}
						],
						series: [{
							name: '',
							type: 'bar',
							barWidth: '30%',
							xAxisIndex: 0,
							yAxisIndex: 0,
							itemStyle: {
								normal: {
									barBorderRadius: 30,
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1, [{
											offset: 0,
											color: props.color[0]
										},
										{
											offset: 0.5,
											color: props.color[1]
										},
										{
											offset: 1,
											color:props.color[2]
										}
									]
									)
								}
							},
							data: yData,
							zlevel: 11

						},
						{
							name: '',
							type: 'bar',
							barWidth: '50%',
							xAxisIndex: 0,
							yAxisIndex: 1,
							barGap: '-135%',
							data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
							itemStyle: {
								normal: {
									color: 'rgba(255,255,255,0.1)'
								}
							},
							zlevel: 9
						},

						]
					}; 	 

      chartdom.setOption(option);
      chartdom.hideLoading(); 
    }
    //挂载
    onMounted(()=>{ 
      state.chartInit = echarts.init(state.echartref); 
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit)
    }) 
    return {
      ...toRefs(state), 
      _resetChartStyle
    };  

  }, 
 
};
</script>

<style>
</style>